<template>
	<base-popup
		class="h-[1000px]"
		:titleT="titleT"
		:hideHeader="view === ViewType.main"
		:isGoBack="view !== ViewType.main"
		:show="!!profileStore.profileShow?.show"
		:closeWithBack="false"
		@goBack="onBack"
		@close="onClose">
		<!--				<template v-if="view !== ViewType.main" #right>-->
		<!--					<div class="text-primary text-base app-text-react" @click="onSave">-->
		<!--						{{ $t('action.save') }}-->
		<!--					</div>-->
		<!--				</template>-->
		<profile-vue v-if="view === ViewType.main" />
		<profile-avatar v-else-if="view === ViewType.avatar" ref="avatarRef" @back="onBack" />
		<profile-edit
			v-else-if="view === ViewType.edit"
			ref="editRef"
			@back="onBack"
			@avatar="profileStore.showProfileType(ViewType.avatar)" />
	</base-popup>
</template>

<script lang="ts" setup>
import { ref, computed, provide, Ref } from 'vue'
import { BasePopup } from '@/components/base'
import { useProfileStore } from '@/store'
import ProfileVue from './profile.vue'
import ProfileAvatar from './profile-avatar.vue'
import ProfileEdit from './profile-edit.vue'
import { ViewType } from './types'

defineOptions({ name: 'ViewsProfileProfile' })

const profileStore = useProfileStore()
const avatarRef = ref<InstanceType<typeof ProfileAvatar>>()
const editRef = ref<InstanceType<typeof ProfileEdit>>()
const isMe = computed(() => profileStore.isMe(profileStore.profileShow?.userId))
const userId = computed(() => String(profileStore.profileShow?.userId))
const view = computed(() => profileStore.profileShow?.viewType)
const titleT = computed(() => {
	switch (view.value) {
		case ViewType.avatar:
			return 'profile.avatar'
		case ViewType.edit:
			return 'profile.edit'
		default:
			return ''
	}
})

const onClose = () => profileStore.hideProfile()
const onBack = () => profileStore.showProfileType(ViewType.main)
// const onSave = () => {
// 	switch (view.value) {
// 		case ViewType.avatar:
// 			return avatarRef.value?.save()
// 		case ViewType.edit:
// 			return editRef.value?.save()
// 	}
// }
provide<Ref<boolean>>('isMe', isMe)
provide<Ref<string>>('userId', userId)
</script>
